<template>
  <div class="travel_container">
    <!-- 选项卡标题导航 -->
    <div class="tab_nav">
      <div
        class="tab_item"
        :class="{ active: activeTabIndex === 0 }"
        @click="activeTabIndex = 0"
      >
        攻略
      </div>
      <div
        class="tab_item"
        :class="{ active: activeTabIndex === 1 }"
        @click="activeTabIndex = 1"
      >
        游记
      </div>
      <div
        class="tab_item"
        :class="{ active: activeTabIndex === 2 }"
        @click="activeTabIndex = 2"
      >
        问答
      </div>
    </div>

    <!-- 选项卡内容区域 -->
    <div class="tab_contents">
      <!-- 攻略内容 -->
      <div class="tab_content" :class="{ hidden: activeTabIndex !== 0 }">
        <div class="guide_contentTtile">
          <div class="guideItem_img">
            <img
              src="../assets/img/F00C3688C5B5B9D2E39B49624A295367AFC9C424_size759_w1000_h666.jpg"
              alt=""
            />
          </div>
          <div class="Item_titleContent">
            <h3 class="guideItem_conTitle">国宝大熊猫</h3>
            <p style="margin-top: 2%; font-size: 15px">
              入住五龙山分别是大能猫“双雄”和“娇奥”双雄，2016年 8月5日出生
              生于成都大猫，
            </p>
          </div>
        </div>

        <div class="guideItems" v-for="(item, index) in guidedatas">
          <div class="Items_img">
          <img :src="'https://jingqu.kuxia.top' + item.banner" alt=""></div>
          <div class="items_content">
            <h3 class="itemsContent_title">{{ item.title }}</h3>
            <p style="margin-top: 2%; font-size: 14px">
             {{ item.introduce }}
            </p>
            <div class="items_user">
              <img
                :src="'https://jingqu.kuxia.top' + item.img"
                alt=""
              />
              <p>{{ item.name }}</p>
            </div>
          </div>
        </div>

      </div>

      <!-- 游记内容 -->
      <div class="tab_content" :class="{ hidden: activeTabIndex !== 1 }">
       <div class="scenic_list">
               <div class="goods_card" v-for="(item, index) in datas">
                 <img :src="'https://jingqu.kuxia.top' + item.banner" alt="" />
                 <p class="card_title">{{ item.content }}</p>
                 <div class="card_content">
                   <div class="items_user">
                               <img :src="'https://jingqu.kuxia.top' + item.avatar" alt="" />
              <p>{{ item.name }}</p>
            </div>
                   <p
                     class="sold"
                   >
                     <img
                       src="../assets/img/love.png"
                       alt=""
                       style="width: 15px; height: 15px"
                     />99+
                   </p>
                 </div>
               </div>
             </div>
      </div>
      <!-- 问答内容 -->
      <div class="tab_content" :class="{ hidden: activeTabIndex !== 2 }">
        <div class="faq_content" v-for="(item, index) in faqdatas">
         <div class="content_items" style="border-bottom:1px soild black">
          <div class="faq_items_img"> 
            <img :src="'https://jingqu.kuxia.top' + item.avatar" alt="" />
          </div>
          <div class="faqItems_content">
            <h4>{{ item.name }}</h4 >
            <p style="font-size:14px;margin-top:6px">{{ item.content }}</p>
            <p style="font-size:14px;margin-top:8px ; display:flex;justify-content: space-between;">发布于{{ item.create_time }} <span>
            <img src="../assets/img/评论.png" alt="">
            <p>2</p>
            </span></p>
          
          </div>
         </div>
        </div>
      </div>
    </div>
  </div>

     <!-- 底部导航栏 -->
  <van-tabbar active-color="#ee0a24"v-model="actives">
    <van-tabbar-item icon="home-o" @click="jump('/home')">首页</van-tabbar-item>
    <van-tabbar-item icon="search" @click="jump('/strategy')">攻略</van-tabbar-item>
    <slot>
    <div class="home_issue">
<div class="home_issue_img" @click="jump('/issue')">
<img src="../assets/img/100016.png" alt="">
</div>
<div style="height: 62%;">

</div>
<p style="font-size: 12px;color: var(--van-tabbar-item-text-color);
    font-size: var(--van-tabbar-item-font-size);
    line-height: var(--van-tabbar-item-line-height);
    cursor: pointer;">发布</p>
    </div>
    </slot>
    <van-tabbar-item icon="friends-o">排行榜</van-tabbar-item>
    <van-tabbar-item icon="setting-o" @click="jump('/mine')">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from "vue";
import {useRouter} from 'vue-router'
import {trave,introData,ask} from '../api/start';


const datas = ref([]);
const guidedatas = ref([]);
const faqdatas = ref([]);
const router=useRouter()
const actives = ref(1);

// 当前激活的选项卡索引
const activeTabIndex = ref(0);


const jump=(url)=>{
  router.push(url);
}


// 游记
trave({

}).then((res) => { 
  console.log(res); //成功回调
  datas.value = res.data;
});


// 攻略
introData({
    scenic_id:5,
}).then((res)=> {
  console.log(res.data); //成功回调
  guidedatas.value = res.data;
});

// 问答
ask({

}).then((res) => { 
  console.log(res); //成功回调
  faqdatas.value = res.data;
});

</script>

<style scoped>
.travel_container {
  height: calc(100vh - 50px); /* 减去底部导航栏高度 */
  overflow: auto;
  background-color: #f5f5f5;
  padding-bottom: 15px;
}

/* 选项卡导航样式 */
.tab_nav {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.tab_item {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  cursor: pointer;
  color: #666;
  font-size: 16px;
  position: relative;
}

.tab_item.active {
  color: #ee0a24;
  font-weight: bold;
}

.tab_item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background-color: #ee0a24;
  border-radius: 1px;
}

/* 内容区域样式 */
.tab_contents {
  padding: 15px;
}

.tab_content {
  width: 100%;
  transition: opacity 0.3s ease;
}

/* 隐藏样式 - 不显示的内容添加此样式 */
.hidden {
  display: none;
}

/* 攻略内容样式 */


.guideItem_img img {
  width: 100%;
  height: 160px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.Item_titleContent {
  padding: 1%;
  padding-left: 2%;
}

.guide_contentTtile{
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.guideItems {
  height: 120px;
  padding: 1%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  margin-top: 2%;
}

.Items_img {
  width: 30%;
  height: 100%;
  background-image: url("../assets/img/F00C3688C5B5B9D2E39B49624A295367AFC9C424_size759_w1000_h666.jpg");
  border-radius: 10px;
  background-size: 160% 100%;
  overflow: hidden;
  >img{
    width: 160%;
    height: 100%;
  }
}

.items_content {
  width: 70%;
  margin-top: 2%;
  margin-left: 5%;
}

.items_user {
  margin-top: 10px;
  display: flex;
  align-items: center;
  > img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
}



/* 游记内容 */
/* 景区瀑布流列表 */
.scenic_list {
  padding-left: 6px;
  padding-right: 6px;
  column-count: 2;
  /* 定义列数，可以根据需要调整 */
  column-gap: 10px;
  /* 定义列与列之间的间隙 */
  /* background-color: aquamarine; */
}

.goods_card {
  break-inside: avoid-column;
  /* 防止内容断裂到新列 */
  margin-bottom: 10px;
  /* 定义项目之间的垂直间距 */
  background-color: #f0f0f0;
  /* 背景颜色，仅为了示例 */
  padding: 6px;
  /* 内边距 */
  border-radius: 5px;
}

.goods_card img {
  width: 100%;
}

.card_title {
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: nowrap;
}
.card_content {
  width: 100%;
  height: 40px;
  font-size: 13px;
  color: #505050;
  display: flex;
}
.sold{
  display: flex; align-items: center; margin-left: 20%
}

.home_price {
  display: flex;
  align-items: center;
  > img {
    width: 30px;
    height: 30px;
    border-radius: 25px;
  }
}

.Past_price{
  margin-left: 10%;
                font-size: 12px;
                display: flex;
                align-items: center;
}

.card_content .items_user{
  >img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
}



/* 问答内容 */

.faq_content{
  width: 96%;
  background-color: #fff;
  padding:3%;
}

.content_items{
  display:flex;
}

.faq_items_img{
  width: 20%;
  >img{
    width: 40px;
    height: 40px;
    border-radius:50%;
  }
}

.faqItems_content span{
  display: flex;
  >img{
    width: 22px;
  }
}

/* 底部导航栏样式 */
van-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.home_issue{
  width: 20%;
  display:flex;
  align-items: center;
  flex-direction: column;
}

.home_issue_img{
 position: absolute;
        width: 55px;
        height: 55px;
        top: -29px;
        background: #ffffff;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
  >img{
    width: 40px;
        height: 40px;
  }
}

</style>
